<template>
  <el-row :gutter="20">
    <el-col :xs="24">
      <el-card class="box-card">
        <template v-slot:header>
          <div class="clearfix">
            <span>个人信息</span>
          </div>
        </template>
        <div>
          <div class="text-center">
            <avatar :user="currentUser" />
          </div>

          <!-- <ul class="list-group list-group-striped">
            <li class="list-group-item">
              <svg-icon icon="user" />&nbsp;&nbsp;用户名称：
              <div class="pull-right">{{ currentUser.username }}</div>
            </li>
            <li class="list-group-item">
              <svg-icon icon="phone" />&nbsp;&nbsp;手机号码：
              <div class="pull-right">{{ currentUser.phonenumber }}</div>
            </li>
            <li class="list-group-item">
              <svg-icon icon="email" />&nbsp;&nbsp;用户邮箱：
              <div class="pull-right">{{ currentUser.email }}</div>
            </li>
            <li class="list-group-item">
              <svg-icon icon="peoples" />&nbsp;&nbsp;所属角色：
              <div class="pull-right">{{ currentUser.roles }}</div>
            </li>
            <li class="list-group-item">
              <svg-icon icon="date" />&nbsp;&nbsp;创建日期：
              <div class="pull-right">{{ currentUser.create_time }}</div>
            </li>
          </ul> -->

          <el-descriptions column=1 label-width="80px" align="center" border>
            <el-descriptions-item label="用户名称">{{ currentUser.username }}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{ currentUser.phone }}</el-descriptions-item>
            <el-descriptions-item label="用户邮箱">{{ currentUser.email }}</el-descriptions-item>
            <el-descriptions-item label="所属角色"> <el-tag size="small">{{ currentUser.roles }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建日期">{{ currentUser.create_time }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24">
      <el-card class="box-card">
        <template v-slot:header>
          <div class="clearfix">
            <span>基本资料</span>
          </div>
        </template>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本资料" name="userinfo">
            <userInfo :user="currentUser" />
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="resetPwd">
            <resetPwd :user="currentUser" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from "vue";
import avatar from './components/avatar.vue'
import userInfo from './components/userInfo.vue'
import resetPwd from './components/resetPwd.vue'

const currentUser = JSON.parse(sessionStorage.getItem("currentUser"))

console.log(currentUser)

const activeTab = ref("userinfo")
</script>

<style lang="scss" scoped>
.el-card {
  min-height: 500px;
  margin-bottom: 10px;
}
</style>
